<template>
	<div class="w-container">
		<div class="w-header">
			<slot></slot>
		</div>
		<div class="w-search mt10 f-between">
			<div class="flex align-center">
				<p class="text-label" style="width: 140px">查询历史数据</p>
				<el-input placeholder="请输入您想搜索的内容" v-model="searchKeyWord" @change="handleSearch"></el-input>
			</div>
			<ul class="tab-check flex align-center gap-20">
				<li class="tab-item" :class="{ active: createUserId == 1 }" @click="handleTabChange(1)">个人</li>
				<li class="tab-item" :class="{ active: createUserId == 2 }" @click="handleTabChange(2)">全部</li>
			</ul>
		</div>
		<div class="w-main" v-loading="loading">
			<el-row :gutter="20">
				<el-col :span="6" v-for="(item, index) in dataList" :key="index">
					<div class="card grid-content" @click="handleLink(item)">
						<div class="card-header f-between">
							<div class="text-label flex align-center">
								<p class="mr8">{{ item.name }}</p>
								<el-image style="width: 14px; height: 14px" :src="fireIcon" v-show="item.isHot == 0" />
							</div>
							<el-check-tag checked style="margin-right: 8px" size="small" v-show="item.isHot == 1">最新</el-check-tag>
						</div>
						<div class="card-content">
							<p>{{ item.remarks }}</p>
							<div class="f-between text-gray f14 mt10">
								<div>
									<el-icon>
										<icon-preview-open theme="outline" size="16" fill="#000000" :strokeWidth="2" strokeLinejoin="miter" strokeLinecap="butt" />
									</el-icon>
									<span>{{ item.readCount }}</span>
								</div>
								<span>{{ item.createTime || '---' }}</span>
							</div>
						</div>
						<div class="card-footer flex tc">
							<div class="flex1">
								<el-button text type="default" @click.stop="handleDetail(item)">
									<el-icon class="mr8">
										<icon-folder-open size="16" fill="#000000" :strokeWidth="2" strokeLinejoin="miter" strokeLinecap="butt" />
									</el-icon>
									查看数据
								</el-button>
							</div>
							<div class="flex1">
								<el-button text type="default" v-auth="'view_statisticalConfiguration_del'" @click="onDel(item)">
									<el-icon class="mr8">
										<icon-delete-four size="16" />
									</el-icon>
									删除
								</el-button>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="w-footer mt10">
			<AplidPaginate v-bind="pageReac" @change="onPageChange" class="pageinate" />
		</div>

		<el-dialog v-model="visibleDetail" title="详情" width="65%" @close="getInitData">
			<PreviewPage v-if="visibleDetail" :nowRowData="nowRowData"></PreviewPage>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'
import { AplidPaginate } from '@/components/AplidCrud'
import PreviewPage from '../operateForm/preview.vue'
import fireIcon from '@/assets/imgs/fire.webp'
import { getStore } from '@/utils/store'

const emit = defineEmits(['check-add'])
const userInfo = getStore('userInfo') || {}
const dataList = ref([])
const searchKeyWord = ref('')
const visibleDetail = ref(false)
const nowRowData: any = ref({})
const createUserId = ref(1)
const loading = ref(false)
let pageReac = ref({
	total: 0,
	size: 10,
	current: 1,
})
const handleSearch = () => {
	getInitData()
}
const handleTabChange = (type) => {
	createUserId.value = type
	getInitData()
}
const getInitData = () => {
	loading.value = true
	let query = {
		pageParaPO: pageReac.value,
		name: searchKeyWord.value,
		createUserId: createUserId.value == 1 ? userInfo.id : '',
	}
	apiMod
		.view_statisticalConfiguration_page(query)
		.then((res) => {
			const data = res.data
			dataList.value = data.records
			pageReac.value.total = data.total
			loading.value = false
		})
		.catch(() => {
			loading.value = false
		})
}

const handleDetail = (row) => {
	visibleDetail.value = true
	nowRowData.value = row
}

const handleLink = (item) => {
	emit('check-add', item)
}
const onDel = (row: any) => {
	ElMessageBox.confirm(`请确实是否要删除${row.name}数据?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			apiMod.view_statisticalConfiguration_del([row.id]).then(() => {
				ElMessage({
					type: 'success',
					message: '删除成功',
				})
				getInitData()
			})
		})
		.catch(() => {})
}

const onPageChange = (page) => {
	pageReac.value = page
	getInitData()
}

onMounted(() => {
	getInitData()
})
</script>
<style scoped lang="scss">
.w-container {
	.tab-check {
		.active {
			color: #000;
			font-weight: bold;
		}

		.tab-item {
			&:hover {
				cursor: pointer;
			}
		}
	}

	.text-label {
		font-family: 'Microsoft YaHei Bold';
		font-weight: 700;
		font-size: 16px;
		text-align: left;
		color: #1c1c28;
		width: 60%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.card {
		margin-top: 10px;
		background-color: #fff;
		border-radius: 0 0 4px 4px;

		&-header {
			padding: 10px;
		}

		&-content {
			padding: 10px;
		}

		&-footer {
			height: 40px;
			line-height: 40px;
			border-top: 1px solid #f5f5f5;
		}
	}
}
</style>
